
<script>
    $(document).ready(function(){
        cont=1;
        nombre=$(".mensajeprevioo").eq(0).children("div").children("div").children("div").children(".nombre_base").text();
         asunto=$(".mensajeprevioo").eq(0).children("div").children("div").children("div").children(".asunto_base").text();
           mensaje=$(".mensajeprevioo").eq(0).children("div").children("div").children("div").children(".mensaje_base").text();
            fecha=$(".mensajeprevioo").eq(0).children("div").children("div").children("div").children(".fecha_base").text();
          
          iden=$(".mensajeprevioo").eq(0).attr("id");
           count=$(".mensajeprevioo").length;
           
        $(".susmensajes").children("div").text("Sus Mensajes ("+count+")");
       $(".nombre_mensaje").text(nombre);
           $(".asunto_mensaje").text(asunto);
           $(".mensaje_mensaje").text(mensaje);
           $(".fecha_mensaje").text(fecha);
           $(".eliminar_mensaje").attr("id",iden);
        $(".mensajeprevios").hover(function(){
           
           $(this).css({"background-color":"#f2f1ef"}); 
        },function(){
            $(this).css({"background-color":"#ffffff"}); 
        });
        $(".mensajeprevioo").click(function(e){
            e.preventDefault();
            nombreee=$(this).children("div").children("div").children("div").children(".nombre_base").text();
           asunto=$(this).children("div").children("div").children("div").children(".asunto_base").text();
           mensaje=$(this).children("div").children("div").children("div").children(".mensaje_base").text();
            fecha=$(this).children("div").children("div").children("div").children(".fecha_base").text();
           iden=$(this).attr("id");
           
           $(".nombre_mensaje").text(nombreee);
           $(".asunto_mensaje").text(asunto);
           $(".mensaje_mensaje").text(mensaje);
           $(".fecha_mensaje").text(fecha);
           $(".eliminar_mensaje").attr("id",iden);
          
        });
        $(".eliminar_mensaje").click(function(){
            
             iden=$(".eliminar_mensaje").attr("id");

         base_url = '<?=base_url();?>index.php/';
     $.post(base_url+"welcome/eliminar_mensaje",{iden:iden},function(data){
         
         if(data.result==true){
             alert("eliminado correctamenete");
               $("#"+iden).remove();
               $(".susmensajes").children("div").text("Sus Mensajes ("+ (count-cont) +")");
               cont=cont+1;
                $(".nombre_mensaje").text("");
           $(".asunto_mensaje").text("");
           $(".mensaje_mensaje").text("");
           $(".eliminar_mensaje").attr("id","");
         }
     },"json");
               
        });
   $(".cerrarmensajes").click(function(){
     $(".contenedormensajes").css({"display":"none"});
     $(".mensajes").animate({"height":"0%","width":"70%"},function(){
          $(".back").css({"display":"none"});
          $(".mensajes").css({"display":"none"});
         
     });
     
//    
});

    });
</script>


     <div class="susmensajes" style="width:100%; height:10%; background-color:#109ba7;">
          <div style="color:#ffffff; position: relative; left: 2%; top: 20%; font-weight: bold;">Sus Mensajes</div>
          <a href="#" class="cerrarmensajes" style=" "> <div style=" position:absolute; top: 1%; left: 85%;  border-radius: 5px; height: 6%; width: 10%; "> <div style="color:#ffffff; position:relative;  font-weight: bold;top: 10%; left: 20%;"> cerrar</div> </div></a>
      </div>
       <div class="mensajeI" style=" overflow: auto;height:80%; width: 28%; float: left; background-color:  #ffffff; margin-right: 1%; ">
       
          <?php for($i=0;$i<$indice;$i++):?> 
        <a href="#" class="mensajeprevioo" style=" list-style:none;text-decoration: none; " id="<?=${"id_mensaje".$i   }?>">
            <div class="mensajeprevios" style=" overflow:hidden;border-bottom: solid 1px #109ba7; width: 97%; height: 28%; background-color: #ffffff; margin-top:2%; margin-left: 2%; color:#000; text-decoration: none;">
           
          <div style=" height: 80%; width: 70%;margin-left: 2%;padding-top: 1%;">
            <div style="font-family: 'Arial'; font-size: 10px; font-weight: bold;">nombre:<div class="nombre_base" style="font-weight: normal;"><?=${"nombre".$i   }?></div></div>
            <div style="font-family: 'Arial'; font-size: 10px; font-weight: bold;">asunto:<div class="asunto_base" style="font-weight:normal; margin-top: -2%;"><?=${"asunto".$i   }?></div></div>
            <div style="font-family: 'Arial'; font-size: 10px; font-weight: bold;">mensaje:<div  class="mensaje_base"style="font-weight:normal;margin-top: -2%;"><?=${"mensaje".$i   }?></div></div>
            
            <div style=" color:#999999; position: relative; top:-99%; left: 80%;font-family: 'Arial'; font-size: 10px; ">fecha:<div  class="fecha_base"style="font-weight:normal;margin-top: -2%;"><?=${"fecha_mensaje".$i   }?></div></div>
            
          </div>
        </div></a>
               <?php   endfor; ?>
               
         
        
    </div>
       
           <div class="mensajeD" style="margin-top: 1%;height:88%; width: 70%; float: left; background-color:  #ffffff; left: 1%;">
        <div style="height: 5%; width: 100%; background-color: #ffffff;">
            <a class="eliminar_mensaje" id="" href="#">eliminar mensaje</a>
        </div>
        <div style="height: 93%; width: 99%; background-color: #ffffff; margin-top: 1%; font-family: 'Arial'">
            <div style="font-family: 'Arial'; font-size: 12px; font-weight: bold; float: left; color:#1384ae;">nombre:</div><div class="nombre_mensaje" style="font-size: 10px; padding-top: 0.3%;">aqui en nombre</div><br>
             <div style="font-family: 'Arial'; font-size: 12px; font-weight: bold; float: left;color:#1384ae;">asunto:</div><div class="asunto_mensaje"  style="font-size: 10px; padding-top: 0.3%;">aqui en asunto</div><br>
            <div style="font-family: 'Arial'; font-size: 12px; font-weight: bold; float:left;color:#1384ae;">mensaje:</div ><br>
            <div style="height: 50%; width: 99%; border: solid 1px #000; margin-top: 2%;  position: relative; overflow: auto;">
                <div class="mensaje_mensaje" style=" position: relative;font-size: 16px; margin-left: 3%;">aqui el mensaje</div>
            </div><br>
            <div style="font-family:'Arial'; ">
                <div style="font-size: 10px;float: left;">fecha:</div><div class="fecha_mensaje" style="font-size: 10px;">18-01-2013</div>
            </div>
            
        </div>
              
    </div><
       
   
   
 